<template>
  <el-card shadow="hover">
    <el-col>
      <el-row :gutter="12">
        <el-col :span="12">
          <el-image class="course-cover" :src="model.coverResource.path" fit="cover" />
        </el-col>
        <el-col :span="12">
          <div style="display: flex;height:100%;flex-direction: column;justify-content: space-between">
            {{ model.name }}

            <div>
              <el-tag :type=" model.prop === 1 ? 'danger' : 'warning'">{{ model.prop === 1 ? '必修' : '选修' }}</el-tag>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-progress
          style="width: 100%;margin-top: 1em"
          :percentage="getCourseProcess"
        />
      </el-row>
    </el-col>
  </el-card>
</template>
<script setup>
import { computed, onMounted } from 'vue'

let model = defineModel()
const getCourseProcess = computed(() => Math.floor(model.value.process * 100))
onMounted(() => {

})
</script>
<style scoped lang="scss">
.course-cover {
  width: 100%;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
}
</style>